<template>
    <div class="app-container">
        <a-card class="box-card" :cardOpen="true">
            <div slot="header">
                <span>事件信息</span>
            </div>
            <div slot="header-toolbtn">
                <BackButton title="返回救援总结列表" :back="{ title: '救援总结', url: '/rate/report/list' }" />
            </div>
            <HandleEventInfo ref="eventInfoRef" :event="eventInfo" />
        </a-card>
        <a-card class="box-card" :cardOpen="true" :style="{ marginTop: '15px' }" v-for="item in handles" :key="item.renderKey">
            <div slot="header">
                <span>
                    {{ item.title }}
                </span>
            </div>
            <ReportHandleViewCard :plan="item.planDetail" :reportContents="reportContents" :handleId="item.handleId" @onFlowReportSave="onFlowReportSave" />
        </a-card>
        <a-card class="box-card" :cardOpen="true" :style="{ marginTop: '15px' }">
            <div slot="header">
                <span> 处置总结 </span>
            </div>
            <el-form size="small">
                <el-form-item label="总结性文档">
                    <el-table :data="docsList" border size="mini" width="100%">
                        <el-table-column prop="attachname" label="名称" align="left"> </el-table-column>
                        <el-table-column prop="attachsize" label="大小" align="center" width="200"> </el-table-column>
                        <el-table-column prop="attachtype" label="类型" align="center" width="200"> </el-table-column>
                        <el-table-column label="操作" align="center" width="260">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="downloadFile(scope.row)"> 下载 </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
        </a-card>
        <task-report-attach ref="taskReportAttach" />
    </div>
</template>
<script>
import ACard from "@/views/components/a-card/card.vue";
import TaskReportAttach from "./components/TaskReportAttach.vue";
import HandleEventInfo from "../handle/module/HandleEventInfo.vue";
import { handleEventInfo as getHandlesList } from "@/api/response/handle";
import { getPlanEventInfo } from "@/api/rescue/rescue";
import { getHandleReportContent } from "@/api/response/report";
import ReportHandleViewCard from "./components/ReportHandleViewCard.vue";
import { getInfoByHandleId as getHandleInfoByHandleId } from "@/api/response/handleInfo";
import BackButton from "@/views/components/backButton/index.vue";

export default {
    name: "DrillContentEdit",
    components: { ACard, TaskReportAttach, ReportHandleViewCard, HandleEventInfo, BackButton },
    dicts: ["usetypecode_dict", "eventlevelcode_dict", "info_report_channel", "sys_dept_type_dict"],
    props: [],
    data() {
        return {
            reportId: 0,
            handleId: 0,
            eventInfo: {},
            levels: [],
            formData: {
                event_name: "",
                event_type: undefined,
                event_level: undefined,
                event_location: undefined,
                event_time: null,
                content_title: undefined,
                impact_area: undefined,
                surroundings: undefined,
                event_cause: undefined,
            },
            groups: [],
            currentGroup: {},
            responseLevelOption: [
                {
                    label: "Ⅰ级响应",
                    value: 1,
                },
                {
                    label: "Ⅱ级响应",
                    value: 2,
                },
                {
                    label: "Ⅲ级响应",
                    value: 3,
                },
                {
                    label: "Ⅳ级响应",
                    value: 4,
                },
            ],
            staffPickType: "",
            chiefName: "",
            planId: 0,
            planTitle: "",
            flowData: [
                {
                    flowId: 1,
                    flowTitle: "组建领导小组",
                },
            ],
            activeScene: "",
            sceneTabs: [],
            activeResponse: "1",
            currentLevel: null,
            currentFlow: null,
            targetModels: null,
            reportId: 0,
            handles: [],
            reportContents: [],
            docsList: [],
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.reportId = this.$route.query.reportId;
        this.getReportInfo();
    },
    methods: {
        getReportInfo() {
            getHandleReportContent(this.reportId).then(res => {
                this.handleId = res.data.handleId;
                res.data.contents.forEach(c => {
                    this.reportContents.push({
                        nodeId: c.nodeId,
                        content: c.content,
                    });
                });
                this.docsList = res.data.attachs;
                this.getHandleInfo();
            });
        },
        getHandleInfo() {
            // 获取处置的基本信息
            getHandleInfoByHandleId(this.handleId).then(hdInfo => {
                if (hdInfo.data.infoId) {
                    getPlanEventInfo(hdInfo.data.infoId).then(res => {
                        this.eventInfo = res.data;
                    });
                }
                getHandlesList(hdInfo.data.hdInfoId).then(hds => {
                    let handles = [];
                    hds.data.forEach(h => {
                        let level = this.responseLevelOption.find(val => val.value == h.responseLevel);
                        handles.push({
                            title: `${h.planDetail.planName} - ${level.label}`,
                            planDetail: h.planDetail,
                            handleId: h.handleId,
                        });
                    });
                    this.handles = handles;
                });
            });
        },
        onFlowNodeClick(val) {
            this.currentFlow = val;
        },
        onFlowReportSave(content, nodeId) {
            this.reportContents.forEach(c => {
                if (c.nodeId == nodeId) {
                    c.content = content;
                }
            });
        },
        downloadFile(row) {
            this.download(`com/ComAttach/download/${row.attachid}`, {}, `${row.attachname}.${row.attachtype}`);
        },
    },
};
</script>
<style lang="scss" scoped>
.role-groups {
    display: flex;

    .role-group-side {
        min-width: 200px;
    }

    .role-list {
        flex: 1;
        margin-left: 15px;
        box-sizing: content-box;
        overflow: hidden;
    }
}

::v-deep {
    .el-tree-node__content {
        display: flex;

        .flow-node {
            flex: 1;
            display: flex;

            .flow-label {
                flex: 1;
                line-height: 28px;
            }

            .flow-btns {
                margin-right: 10px;
            }
        }
    }

    .el-button.tab-edit-btn {
        color: #13ce66;
        margin-left: 10px;
        font-size: 12px;
    }
}

.feed-container {
    background: #0b133c;
    color: white;
    border-radius: 10px;
    padding: 15px;

    .feed-list {
        overflow-y: scroll;
        max-height: 300px;

        // 设置滚动条宽度
        &::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
            background: rgba(10, 122, 227, 0.01);
        }

        //滚动条的哈滑块
        &::-webkit-scrollbar-thumb {
            background: #2e6190;
            border-radius: 3px;
        }

        .feed-item {
            font-size: 12px;
            line-height: 25px;
        }
    }
}

.task-report {
    padding: 0 20px 20px;
}

ul,
li {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}
</style>
